<template>
    <n-card :bordered="false" class="proCard">
      <BasicForm @register="register" @submit="handleSubmit" @reset="handleReset">
          <template #anchorId="{ model, field }">
              <n-input v-model:value="model[field]" clearable placeholder="请输入主播id" />
          </template>
          <template #dateSelect="{ model, field }">
              <n-date-picker
                v-model:formatted-value="model[field]"
                clearable
                type="daterange"
                value-format="yyyy-MM-dd"
              />
          </template>
        </BasicForm>

        <BasicTable ref="actionRef" :columns="columns" :row-key="(row) => row.id" :request="loadDataTable"  :scroll-x="2048" :actionColumn="actionColumn" @update:checked-row-keys="onCheckedRow">
            <template #toolbar>
                <n-button type="primary" @click="reloadTable">刷新数据</n-button>
            </template>
        </BasicTable>
    </n-card>

 <basicModal style="width: 80%" @register="modalRegister" ref="modalRef" class="basicModal" @on-ok="okModal">
  <BasicTable ref="detailRef" :columns="editColumns" :row-key="(row) => row.id" :request="detailLoadTable"  :scroll-x="2048">
      <template #toolbar>
          <n-button type="primary" @click="detailReloadTable">刷新数据</n-button>
      </template>
  </BasicTable>
  </basicModal>
</template>
  
<script lang="ts" setup>
import { reactive, ref, unref,h } from 'vue';
import { BasicTable,TableAction } from '@/components/Table';
import { BasicForm, FormSchema, useForm } from '@/components/Form/index';
import { columns,editColumns } from './columns';
import { getAnchorHbList, getAnchorHbDetail} from '@/api/redpacket/redpacket';
import {EditOutlined} from '@vicons/antd';
import {useDialog, useMessage} from 'naive-ui';
import {useModal} from "@/components/Modal";
const actionRef = ref();
const detailRef = ref()
const message = useMessage();
const isEdit = ref(false);

const schemas: FormSchema[] = [
    {
      field: 'anchorId',
      component: 'NInput',
      label: '主播ID',
      componentProps: {
        placeholder: '主播标识',
        onInput: (e: any) => {
          console.log(e);
        },
      },
      slot: 'anchorId',
    },
    {
      field: 'timeRange',
      label: '日期',
      componentProps: {
        placeholder: '日期',
      },
      slot: 'dateSelect',
    },
];


const [register, {  }] = useForm({
    gridProps: { cols: '1 s:1 m:2 l:3 xl:4 2xl:4' },
    labelWidth: 120,
    schemas,
});

const formParams = reactive({
    anchorId: 0,
    startAt:'',
    endAt:''
});

function handleSubmit(values: Recordable) {
    console.log('handle', values);
    if(/^[1-9]\d*$/.test(values.anchorId)){
      formParams.anchorId = Number(values.anchorId)
    }
    if( Array.isArray(values.timeRange)  && values.timeRange.length === 2){
      formParams.startAt = values.timeRange[0]
      formParams.endAt = values.timeRange[1]
    }
    reloadTable();
}

function handleReset(values: Recordable) {
  formParams.anchorId = 0
  formParams.startAt = ''
  formParams.endAt = ''
  reloadTable()
}

function reloadTable() {
    actionRef.value.reload();
}

function detailReloadTable(){
  detailRef.value.reload();
}

const loadDataTable = async (res) => {
    const param = { ...formParams, ...res };
    const data = await getAnchorHbList(param);
    return data;
};

const detailFormParams = reactive({
  redId: 0,
});

const detailLoadTable = async (res) => {
    const param = { ...detailFormParams, ...res };
    const data = await getAnchorHbDetail(param);
    return data;
};

const actionColumn = reactive({
    width: 100,
    title: '操作',
    key: 'action',
    fixed: 'right',
    render(record) {
        return h(TableAction as any, {
        style: 'button',
        actions: [
          {
            label: '领取明细',
            onClick: handleEditRedpacket.bind(null, record),
            type: 'info',
            icon: EditOutlined,
            ifShow: () => {
              return true;
            },
          },
        ],
        select: (key) => {
          message.info(`您点击了，${key} 按钮`);
        },
      });
    },
});

const [modalRegister, {openModal, closeModal, setSubLoading, setProps}] = useModal({
    title: '领取明细',
});

async function handleEditRedpacket(record: Recordable) {
    isEdit.value = true;
    detailFormParams.redId = record.id
    await openModal();
    setProps({title: "领取明细"});
    // let obj = Object.assign({}, unref(record), {remainMoney: unref(record).remainMoney + ""});
    // await addSetFieldsValue(obj)
}

async function okModal() {
  isEdit.value = false;
  closeModal();
}
</script>

<style lang="less" scoped></style>
   